<template>
    <div class="tab">
      <cube-tab-bar v-model="selectedLabelSlots" @click="changHandler">
        <cube-tab
          v-for="(item) in tabs"
          :icon="item.icon"
          :label="item.label"
          :key="item.path"
          :value="item.path"
        ></cube-tab>
      </cube-tab-bar>
    </div>
  </template>

<script>
export default {
  data() {
    return {
      selectedLabelSlots: "/",
      tabs: [
        {
          label: "首页",
          icon: "cubeic-home",
          path: "/"
        },
        {
          label: "我的订单",
          icon: "cubeic-like",
          path: "/order"
        },
        {
          label: "个人中心",
          icon: "cubeic-person",
          path: "/personal"
        }
      ]
    };
  },
  methods: {
      changHandler(path){
          //this.$route.path是当前路径
          if(path !== this.$route.path){
              this.$router.push(path)
          }
      }
  },
  created(){
      //默认路由选择器，比如刷新页面，需要重新进到当前路由
      this.selectedLabelSlots = this.$route.path
  }
};
</script>